<header class="sticky top-0 z-40 bg-gray-900">
  <div class="container mx-auto flex justify-between p-4">
    <div class="flex select-none items-center">
      <a class="flex h-8 items-center focus:outline-none" [routerLink]="'/'">
        <img
          class="h-10"
          src="./assets/logo/touca_logo_fg.svg"
          alt="Touca Logo"
          loading="lazy"
          width="40px"
          height="40px" />
        <h1
          class="sr-only text-2xl font-bold leading-10 tracking-tight text-white">
          touca
          <span class="text-sky-300">.io</span>
        </h1>
        <img
          class="no-sr-only"
          src="./assets/logo/touca_logo_fgt.svg"
          alt="Touca.io"
          loading="lazy"
          width="90px" />
      </a>
    </div>
    <nav class="flex items-center space-x-8">
      <div>
        <a
          class="rounded-6 text-md rounded-lg bg-transparent px-4 py-2 font-semibold leading-6 text-white hover:bg-sky-100 hover:bg-opacity-25"
          href="https://touca.io/docs"
          target="_blank">
          Docs
        </a>
      </div>
      <div wslDropdown>
        <a
          class="wsl-dropdown-toggle cursor-pointer select-none"
          id="wsl-user-dropdown"
          aria-haspopup="true"
          aria-expanded="false">
          <p class="text-md flex items-center font-semibold text-white">
            {{ currentUser?.fullname }}
            <ng-icon class="opacity-50" name="featherChevronDown" />
          </p>
        </a>
        <div
          class="wsl-dropdown-menu hidden w-48"
          aria-labelledby="wsl-user-dropdown">
          <div class="wsl-dropdown-item" routerLink="/account/profile">
            <div class="flex items-center space-x-2">
              <ng-icon
                class="wsl-text-muted"
                size="1.1rem"
                name="featherSettings" />
              <a class="text-sky-700 dark:text-gray-300">Settings</a>
            </div>
          </div>
          <hr class="my-1 border-gray-200 dark:border-gray-700" />
          <div class="wsl-dropdown-item" (click)="logout()">
            <div class="flex items-center space-x-2">
              <ng-icon
                class="wsl-text-muted"
                size="1.1rem"
                name="featherLogOut" />
              <a class="text-sky-700 dark:text-gray-300">Sign out</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</header>
